<template>
  <div class="contact-us-container">

    <hurdle :showLine="5"></hurdle>

    <div class="contact-us-logo-box">
      <span class="contact-banner-cn">联系我们</span>
      <span class="contact-banner-en">Contact us</span>
      <span class="contact-banner-line"></span>

      <div class="contact-us-company-box">
        <div class="company-map" id="container"></div>

        <div class="us-company-info">
          <span>广东蓝聘网络科技科技有限公司</span>
          <span>电话：400-9600395</span>
          <span>邮箱：lanpinkeji@163.com</span>
          <span>网址：http://www.lanpin123.com</span>
          <span>地址：广东省东莞市厚街镇新汽车客运站（高速路口旁50米）</span>
        </div>
      </div>
    </div>

    <div class="contact-us-opinion-feedback">
      <span class="feedback-cn">意见反馈</span>
      <span class="feedback-en">FEEDBACK</span>
      <span class="feedback-line"></span>

      <div class="feedback-user-box">
        <div class="feedback-user-con">
          <span>姓名：</span>
          <input type="text" placeholder="请输入姓名" class="user-text" v-model="userName" maxLength="5"/>
        </div>
        <div class="feedback-user-con">
          <span>手机号/邮箱：</span>
          <input type="text" placeholder="请输入手机号/邮箱" class="user-text" v-model="contact" maxLength="32"/>
        </div>
      </div>

      <div class="feedback-text-box">
        <span>意见建议：</span>
        <textarea placeholder="请输入意见建议" class="feedback-text" v-model="feedback" maxLength="50"></textarea>
      </div>

      <button type="button" class="feedback-commit" @click="commitFeedBack">提交</button>
    </div>

    <service></service>

    <back-top></back-top>

    <store-footer></store-footer>

  </div>
</template>

<script>
  import hurdle from "../../components/hurdle";
  import service from "../../components/service";
  import storeFooter from "../../components/storeFooter";
  import {getSessionStore} from "../../config/util";
  import {baseUrl} from "../../config/env";
  import {checkName} from "../../config/verify";
  import {Loading} from 'element-ui';
  import backTop from "../../components/backTop";

  export default {
    data() {
      return {
        userName: "",
        contact: "",
        feedback: "",
        userToken: ""
      }
    },
    created() {
      if (getSessionStore("userToken")) {
        this.userToken = getSessionStore("userToken");
      }
    },
    mounted() {
      let map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16, //初始地图级别
        center: [113.6886370000, 22.9313200000], //初始地图中心点
      });

      var icon = new AMap.Icon({
        size: new AMap.Size(120, 66),    // 图标尺寸
        image: require('../../../static/marker.png'),  // Icon的图像
        imageSize: new AMap.Size(120, 66)   // 根据所设置的大小拉伸或压缩图片
      });

      let marker = new AMap.Marker({
        position: new AMap.LngLat(113.6886370000, 22.9313200000),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '广东蓝聘网络科技科技有限公司',
        icon: icon, // 添加 Icon 图标 URL
        anchor: 'center', // 设置锚点方位
      });
      map.add(marker);
    },
    methods: {
      checkFeedBack() {
        if (this.contact == "" || this.contact == undefined || this.contact == null) {
          this.$message({message: "请填写入手机号/邮箱!", center: true, type: 'error', duration: 1000, duration: 1000});
          return;
        }
        if (this.feedback == "" || this.feedback == undefined || this.feedback == null) {
          this.$message({message: "请填写意见建议!", center: true, type: 'error', duration: 1000, duration: 1000});
          return;
        }
        return true;
      },
      commitFeedBack() {
        if (checkName(this.userName) && this.checkFeedBack(this.userName)) {
          let data = {
            "userName": this.userName,
            "userTel": this.contact,
            "details": this.feedback
          };
          this.axios.post(baseUrl + "/problem/add_api?userToken=" + this.userToken, data).then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$message({message: "提交意见反馈失败,请稍后重试!", center: true, type: 'error', duration: 1000});
              } else {
                this.$message({message: "感谢您的意见反馈!", center: true, type: 'success', duration: 1000});
                this.userName = "";
                this.contact = "";
                this.feedback = "";
              }
            } else {
              this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
            }
          }).catch(() => {
            this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
          });
        }
      }
    },
    components: {
      hurdle,
      service,
      storeFooter,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .contact-us-container {
    .wh(100%, auto);
    position: relative;
    .contact-us-logo-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .wh(100%, 540px);
      .bg-image("../page/contact/us_banner.png");
      .contact-banner-cn {
        padding-top: 110px;
        padding-bottom: 9px;
        .size-color(30px, #FFF);
      }
      .contact-banner-en {
        .size-color(14px, #FFF);
        padding-bottom: 15px;
      }
      .contact-banner-line {
        .wh(40px, 4px);
        background: #3CAFFF;
      }
      .contact-us-company-box {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        .wh(1200px, 372px);
        background: #FFF;
        box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.1);
        top: 260px;
        z-index: 10;
        display: flex;
        align-items: center;
        .company-map {
          .wh(546px, 309px);
          background: #EEE;
          margin-left: 32px;
          margin-right: 88px;
        }
        .us-company-info {
          display: flex;
          flex-direction: column;
          span {
            .size-color(16px, #666);
            line-height: 36px;
            &:first-child {
              .size-color(24px, #3CAFFF);
              padding-bottom: 53px;
            }
          }
        }
      }

    }
    .contact-us-opinion-feedback {
      display: flex;
      align-items: center;
      flex-direction: column;
      .wh(100%, auto);
      .feedback-cn {
        padding-top: 165px;
        padding-bottom: 9px;
        .size-color(30px, #434343);
      }
      .feedback-en {
        padding-bottom: 15px;
        .size-color(14px, #CCC);
      }
      .feedback-line {
        margin-bottom: 51px;
        .wh(40px, 4px);
        background: #3CAFFF;
      }
      .feedback-user-box {
        display: flex;
        width: 1200px;
        margin-bottom: 25px;
        .feedback-user-con {
          flex: 1;
          display: flex;
          flex-direction: column;
          &:first-child {
            margin-right: 25px;
          }
          span {
            padding-bottom: 15px;
            .size-color(18px, #4D4D4D);
          }
          .user-text {
            height: 48px;
            background: rgba(245, 245, 245, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            border-radius: 4px;
            .size-color(18px, #4D4D4D);
            padding-left: 18px;
          }

        }
      }
      .feedback-text-box {
        .wh(1200px, auto);
        display: flex;
        flex-direction: column;
        span {
          padding-bottom: 15px;
          .size-color(18px, #4D4D4D);
        }
        .feedback-text {
          .size-color(18px, #4D4D4D);
          height: 190px;
          background: rgba(245, 245, 245, 1);
          border: 1px solid rgba(235, 235, 235, 1);
          border-radius: 4px;
          margin-bottom: 60px;
          resize: none;
          padding-left: 18px;
          padding-top: 18px;
        }
      }
      .feedback-commit {
        .wh(160px, 48px);
        background: rgba(60, 175, 255, 1);
        border-radius: 4px;
        .size-color(16px, #FFF);
        margin-bottom: 60px;
        &:hover {
          background: #39A2ED;
          cursor: pointer;
        }
      }
    }
  }
</style>
